<!-- 表格头部选择组件 -->
<!-- 传入属性 -->
<!-- 
timerList:时间区域选择数组  例子：['昨日', '近七日', '本月']
itemList:下拉渲染数组值  title:左边名称  defaultText初始化的文字  showText选中后展示文字  status是否开启隐藏区域（     false关闭，true开启）  list隐藏区域的内容成员【name成员名称 onlyId与后端配的传递信息  status是否选中的状态（false       未选中，true选中）】
     例子：[{title: '劵码类型',defaultText: '请选择劵码类型',showText: '',status: false,
     list: [{ name: '优惠券', onlyId: 0, status: false },{ name: '折扣券', onlyId: 1, status: false},{ name: '满减券', onlyId: 2, status: false },],},] 
timeShow:是否展示时间选择部分  默认展示 true    
btnShow:是否展示确认等按键  默认展示 true-->

<!-- 传入方法 -->
<!-- 
clickTimer:使用父组件函数，传递选择的点击部分成员位置信息
timersChange:时间选择函数 传递给父元素，传递选择的开始时间value1 + 结束时间value2
merchantQuery:查询点击函数 使用父级函数 传递开始时间openTime+结束时间endTime+用户选中的集中数组queryList
merchantReset:重置点击函数 使用父级函数 传递开始时间openTime+结束时间endTime+用户选中的集中数组queryList
typeChange:当只有一个成员时，可以使用此点击函数，传递给父组件点击的这个成员所有信息+选择的位置信息
 -->

<template>
    <div class="dropDown" @mouseleave="leave">
        <!-- 成员区域 -->
        <!-- ------------------------------------------------------------------------------------------------ -->
        <div class="dropDown-features" v-if="timerList.length != 0">
            <div
                v-for="(value, index) in timerList"
                :key="index"
                :class="
                    index == timerIndex
                        ? 'time-features-click'
                        : 'time-features-noclick'
                "
                @click="timeFeatures(index, value)"
            >
                {{ value }}
            </div>
        </div>

        <!-- 下拉类型 -->
        <!-- ------------------------------------------------------------------------------------------------ -->
        <div
            class="dropDown-item"
            @mouseleave="leave"
            v-for="(value, index) in itemShowList"
            :key="index"
        >
            <span>{{ value.title }}</span>
            <!-- 选择内容区域 -->
            <div class="dropDown-item-show" @click="openOrClose(index, value)">
                <!-- 若展示数据showText为空则展示默认字段defaultText，否则展示此数据showText -->
                {{ value.showText ? value.showText : value.defaultText }}
                <span></span>
            </div>
            <!-- 内容隐藏区域 -->
            <div class="dropDown-item-change" v-show="value.status">
                <!-- 成员循环区域 -->
                <div
                    v-for="(val, ind) in value.list"
                    :key="ind"
                    @click="typeClick(value, ind, val)"
                >
                    {{ val.name }}
                </div>
            </div>
        </div>

        <!-- 日期组件 -->
        <!-- ------------------------------------------------------------------------------------------------ -->
        <div class="dropDown-time" v-if="timeShow">
            <el-date-picker
                v-model="value1"
                @change="timers"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                placeholder="选择开始日期"
                :picker-options="pickerOptions"
            >
            </el-date-picker>
            <span>至</span>
            <el-date-picker
                v-model="value2"
                @change="timers"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                placeholder="选择结束日期"
                :picker-options="pickerOptions"
            >
            </el-date-picker>
        </div>

        <!-- 查询和重置按键 -->
        <!-- ------------------------------------------------------------------------------------------------ -->
        <div class="dropDown-btn" v-if="btnShow">
            <span @click="query">查询</span>
            <span @click="Reset">重置</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 下拉渲染数组值  title:左边名称  defaultText初始化的文字  showText选中后展示文字  status是否开启隐藏区域（false关闭，true开启）  list隐藏区域的内容成员【name成员名称 onlyId与后端配的传递信息  status是否选中的状态（false未选中，true选中）】
        itemList: {
            type: [Array],
            default() {
                return [];
            },
        },

        // 时间区域选择数组
        timerList: {
            type: [Array],
            default() {
                return [];
            },
        },

        // 是否展示时间选择部分  默认展示 true
        timeShow: {
            type: [Boolean],
            default: true,
        },

        // 是否展示确认等按键  默认展示 true
        btnShow: {
            type: [Boolean],
            default: true,
        },
    },
    data() {
        return {
            // 判断是否是选择成员
            timerIndex: '',

            // 日期选择组件配套数据
            // --------------------------------------------------------------------------------------
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 3600 * 1000 * 24;
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        },
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        },
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        },
                    },
                ],
            },

            // 承接选择下拉渲染数组
            itemShowList: [],
            // 查询点击返回数据承接数组
            queryList: [],

            // 开始时间
            value1: '',
            // 结束时间
            value2: '',
        };
    },
    watch: {
        // 监听位置变化的内容，将位置信息传递给父级
        timerIndex(index) {
            // 使用父组件函数，传递选择的点击部分成员位置信息
            this.$emit('clickTimer', { index: index });
        },
    },
    methods: {
        // 时间功能选择区域点击函数
        timeFeatures(index, value) {
            this.timerIndex = index;
        },

        // 鼠标移出事件
        leave() {
            // 关闭所有成员弹窗
            this.itemShowList.forEach((v) => (v.status = false));
        },

        // 时间选择函数  传递给父元素，传递选择的开始时间value1 + 结束时间value2
        timers() {
            this.$emit('timersChange', {
                openTime: this.value1,
                endTime: this.value2,
            });

            if (this.value1 > this.value2) {
                this.value2 = '';
            }
        },

        // 劵码类型隐藏区域开关点击函数 index未当时点击的位置信息
        openOrClose(index, value) {
            if (value.status) {
                value.status = false;
                return;
            }

            // 循环遍历承接选择下拉渲染数组itemShowList，根据选中的位置信息进行开关隐藏区域（选中的打开，未选中的关闭）
            this.itemShowList.forEach((v, i) => {
                index == i ? (v.status = true) : (v.status = false);
            });
        },

        // 隐藏区域成员点击函数  参数value整个父级对象  index子级成员点击位置信息
        typeClick(value, index, val) {
            // 循环遍历选中的整个父级对象中的子级数组list
            value.list.forEach((v, i) => {
                // 判断是否与选中的位置信息一致
                if (index == i) {
                    // 改变选中成员的状态
                    v.status = true;
                    // 同步父级中显示的内容信息
                    value.showText = v.name;
                    // 关闭隐藏区域
                    value.status = false;
                } else {
                    // 未选中的成员状态都为false
                    v.status = false;
                }
            });

            // 初始化查询点击返回数据承接数组
            this.queryList = [];
            // 循环遍历承接选择下拉渲染数组itemShowList
            this.itemShowList.forEach((v) => {
                // 获取选中的子级成员
                let choice = v.list.find((v) => v.status === true);
                // 查询点击返回数据承接数组queryList添加成员，若choice为空及用户未选择，则返空，若是选中了，则返选择的后端需要数据onlyId
                this.queryList.push(choice ? choice.onlyId : '');
            });

            // 当只有一个成员时，可以使用此点击函数，传递给父组件点击的这个成员所有信息+选择的位置信息
            this.$emit('typeChange', {
                value: value,
                val: val,
                queryList: this.queryList,
            });
        },

        // 查询点击函数
        query() {
            // 初始化查询点击返回数据承接数组
            this.queryList = [];
            // 循环遍历承接选择下拉渲染数组itemShowList
            this.itemShowList.forEach((v) => {
                // 获取选中的子级成员
                let choice = v.list.find((v) => v.status === true);
                // 查询点击返回数据承接数组queryList添加成员，若choice为空及用户未选择，则返空，若是选中了，则返选择的后端需要数据onlyId
                this.queryList.push(choice ? choice.onlyId : '');
            });
            // 使用父级函数 传递开始时间openTime+结束时间endTime+用户选中的集中数组queryList
            this.$emit('merchantQuery', {
                openTime: this.value1,
                endTime: this.value2,
                queryList: this.queryList,
                index: this.timerIndex,
            });
            // 防止时间传错
            if (this.value1 > this.value2) {
                this.value2 = '';
            }
        },

        // 重置点击函数
        Reset() {
            // 初始化显示数据
            this.itemShowList.forEach((v) => {
                v.status = false;
                v.showText = '';
                // 子级成员初始化
                v.list.forEach((val) => {
                    val.status = false;
                });
            });
            this.value1 = this.value2 = '';
            this.queryList = [];
            this.timerList.length != 0
                ? (this.timerIndex = 0)
                : (this.timerIndex = '');

            // 使用父级函数 传递开始时间openTime+结束时间endTime+用户选中的集中数组queryList
            this.$emit('merchantReset', {
                openTime: '',
                endTime: '',
                queryList: this.queryList,
                index: this.timerIndex,
            });
        },
    },

    created() {
        // 将传递过来的渲染数组itemList 同步给承接数组itemShowList
        if (this.itemList.length != 0) {
            this.itemShowList = this.itemList;
        }
        // 用户信息选中的时间功能区成员位置
        this.timerList.length != 0
            ? (this.timerIndex = 0)
            : (this.timerIndex = '');
    },
};
</script>

<style scoped>
/* 表格头部选择组件 */
.dropDown {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* margin: 15px auto auto auto; */
    position: relative;
}

/* 时间区域功能按键 */
/* -------------------------------------------------------------------------------------------- */
.dropDown-features {
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-right: 18px;
}
/* 功能区域成员样式 */
.dropDown-features div {
    height: 100%;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #f2f7fc;
    line-height: 32px;
    padding: 0 14px;
    margin-right: 1px;
    transition: all 0.5s;
}
/* 选中成员样式 */
.time-features-click {
    background: #00a0ff;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
}
/* 未被选中样式 */
.time-features-noclick {
    background: #32395e;
}

/* 日期组件外层 */
/* -------------------------------------------------------------------------------------------- */
.dropDown-time {
    margin-right: 10px;
}
.dropDown-time span {
    display: inline-block;
    height: 100%;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #959ebf;
    line-height: 32px;
    padding: 0 10px;
}
/* 选择成员外层 */
/* -------------------------------------------------------------------------------------------- */
.dropDown-item {
    color: #fff;
    font-size: 16px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    position: relative;
}
/* 标题 */
.dropDown-item > span {
    margin-right: 5px;
}
/* input框样式 */
.dropDown-item > input {
    outline-style: none;
    margin-left: 5px;
    height: 30px;
    padding-left: 10px;
    background-color: #32395e;
    border-radius: 4px;
    border: none;
    color: rgb(192, 196, 204);
}
/* input框提示文字样式 */
::-webkit-input-placeholder {
    color: rgb(192, 196, 204);
    font-size: 14px;
}

/* 成员显示区域样式 */
.dropDown-item-show {
    margin-left: 5px;
    width: 160px;
    height: 30px;
    padding-left: 10px;
    background-color: #32395e;
    border-radius: 4px;
    border: none;
    text-align: left;
    line-height: 30px;
    color: rgb(192, 196, 204);
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropDown-item-show > span {
    width: 10px;
    height: 10px;
    background-image: url('https://oss4.komect.com/equity-base/cms/下拉.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    right: 5px;
}
/* 成员隐藏区域样式 */
.dropDown-item-change {
    position: absolute;
    width: 170px;
    right: 0;
    top: 100%;
    text-align: center;
    background: #fff;
    z-index: 9999;
}
/* 隐藏区域组成成员样式 */
.dropDown-item-change > div {
    width: 100%;
    /* height: 30px; */
    /* line-height: 30px; */
    padding: 5px 0;
    font-size: 14px;
    color: #000;
}
/* 隐藏成员hover样式 */
.dropDown-item-change > div:hover {
    background: gray;
    font-weight: bold;
    color: #fff;
}

/* 查询和重置按键样式 */
.dropDown-btn {
    width: 152px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 0;
}
.dropDown-btn > span {
    width: 70px;
    height: 100%;
    border-radius: 4px;
}
.dropDown-btn > span:nth-of-type(1) {
    background: #00a0ff;
}
.dropDown-btn > span:nth-of-type(2) {
    background: #2dbd6d;
}
</style>

<style>
/* 时间组件样式集中区 */
/* -------------------------------------------------------------------------------- */
.dropDown-time .el-input__inner {
    background-color: #32395e;
    border-radius: 4px;
    color: #f2f7fc;
    border: none;
    height: 32px;
    line-height: 32px;
    position: relative;
}
.dropDown-time .el-date-editor.el-input {
    width: 160px;
}
.dropDown-time .el-input__icon {
    line-height: 32px;
}
.dropDown-time .el-input__prefix {
    transition: all 0.3s;
    transform: translateX(110px);
}
.dropDown-time .el-input--prefix .el-input__inner {
    padding-left: 12px;
}
</style>
